<template>
    <div>
        <!-- 二级导航 开始 -->
    <div class="navigation" ref="tions">
        <div class="w1080">
            <div class="left_nav">
                <h2>智能手表</h2>
                <ul>
                    <li class="item">全部产品></li>
                    <li>新品上市></li>
                    <li>最畅销品></li>
                    <li>蓝牙手表></li>
                    <li>通话手表></li>
                </ul>
            </div>
            <div class="cent_nav">
                <!-- 全部产品 -->
                <div class="active">
                    <div class="all_products">
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                    </div>
                </div>
                <!-- 新品上市 -->
                <div>
                    <div class="all_products">
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G9-3.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G16-2.jpg" alt="">
                            <h3>Smart Watch G16</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G16-1.jpg" alt="">
                            <h3>Smart Watch G16</h3>
                        </div>
                    </div>
                </div>

                <!-- 最畅销品 -->
                <div>
                    <div class="all_products">
                        <div class="conster">
                            <img src="@/assets/img/i7-5.jpg" alt="">
                            <h3>Smart Watch i7</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/i7-6.jpg" alt="">
                            <h3>Smart Watch i7</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/I12-2.jpg" alt="">
                            <h3>Smart Watch i12</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/I12-7.jpg" alt="">
                            <h3>Smart Watch i12</h3>
                        </div>
                    </div>
                </div>

                <!-- 蓝牙手表 -->
                <div>
                    <div class="all_products">
                        <div class="conster">
                            <img src="@/assets/img/G9-2.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G9-3.jpg" alt="">
                            <h3>Smart Watch G9</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G16-2.jpg" alt="">
                            <h3>Smart Watch G16</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/G16-1.jpg" alt="">
                            <h3>Smart Watch G16</h3>
                        </div>
                    </div>
                </div>
                <!-- 通话手表 -->
                <div>
                    <div class="all_products">
                        <div class="conster">
                            <img src="@/assets/img/k50-1.jpg" alt="">
                            <h3>Smart Watch K50</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/k50-6.jpg" alt="">
                            <h3>Smart Watch K50</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/k60-1.jpg" alt="">
                            <h3>Smart Watch k60</h3>
                        </div>
                        <div class="conster">
                            <img src="@/assets/img/k60-5.jpg" alt="">
                            <h3>Smart Watch k60</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_nav">
                <p>全部产品型号  >></p>
            </div>
        </div>
    </div>
    <!-- 二级导航 结束 -->

    <!-- 轮播图 开始-->
    <div class="slideshow">
         <swiper class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      :loop="true">
      <swiper-slide v-for="(val,i) in data" :key="i">
          <img :src="'http://www.kymid.com/testphp/public'+val.image" alt="">
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <!-- <div class="swiper-button-prev"></div> -->
      <!-- <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</swiper>
    </div>
    <!-- 轮播图 结束-->

    <!-- 智能手表 开始 -->
    <div class="smartwatch w1080">
        <!-- 智能手表 全能旗舰 -->
        <h2 class="smartwatch_title"> 智能手表 全能旗舰</h2>

        <!-- 手表详情 开始 -->

        <div  v-for="val in filterst" :key="val.id">
            <div class="smart_watch1" v-if="val.weigh === '2'">
            <h2>{{val.name_en}}</h2>
            <h3>{{val.name_ch}}</h3>
            <p>{{val.synopsis}}</p>
            <div class="know">
                <li><router-link to="/index/alldocuments">了解更多</router-link></li>
            </div>
            <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
            </div>

            <div class="smart_watch2" v-else-if="val.length > 1">
                <div v-for="vals in val" :key="vals.id">
                    <div class="watch2">
                <img :src="'http://www.kymid.com/testphp/public'+ vals.image" alt="">
                <h2>{{vals.name_en}}</h2>
                <h3>{{vals.name_ch}}</h3>
            <p>{{vals.synopsis}}</p>
                <div class="know">
                    <li><router-link to="/index/alldocuments">了解更多</router-link></li>
                </div>
            </div>
                </div>
           <!--  <div class="watch2">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <h2>{{val.name_en}}</h2>
                <h3>{{val.name_ch}}</h3>
            <p>{{val.synopsis}}</p>
                <div class="know">
                    了解更多
                </div>
            </div> -->
        </div>
        </div>

        <!-- <div class="smart_watch1">
            <h2>Smart Watch i12</h2>
            <h3>重塑经典，[腕]若新生 </h3>
            <p>GF全贴合工艺|1.28寸全圆全触|强劲续航 </p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/I12-7.jpg" alt="">
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div> -->
        <!-- <div class="smart_watch2">
            <div class="watch2">
                <img src="@/assets/img/G9-3.jpg" alt="">
                <h2>Black Panther G9</h2>
                <h3>时光不负，智见不凡</h3>
                <p>30天超长续航|奢华真空镀合金中框|IP68级防水</p>
                <div class="know">
                    了解更多
                </div>
            </div>
            <div class="watch2">
                <img src="@/assets/img/i7-6.jpg" alt="">
                <h2>Smart Watch i7</h2>
                <h3>让生活充满色彩</h3>
                <p>双曲面屏效 | IPS低功耗彩屏 | 全天候心率监测</p>
                <div class="know">
                    了解更多
                </div>
            </div>
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div>
        <div class="smart_watch1">
            <h2>Smart Watch G16</h2>
            <h3>北欧极简风，轻巧小方屏</h3>
            <p>36g超轻设计|1.6英寸高清大屏|体温监测</p>
            <div class="know">
                了解更多
            </div>
            <img src="@/assets/img/G16-1.jpg" alt="">
        </div>
        <div class="smart_watch2">
            <div class="watch2">
                <img src="@/assets/img/G9-3.jpg" alt="">
                <h2>Black Panther G9</h2>
                <h3>时光不负，智见不凡</h3>
                <p>30天超长续航|奢华真空镀合金中框|IP68级防水</p>
                <div class="know">
                    了解更多
                </div>
            </div>
            <div class="watch2">
                <img src="@/assets/img/i7-6.jpg" alt="">
                <h2>Smart Watch i7</h2>
                <h3>让生活充满色彩</h3>
                <p>双曲面屏效 | IPS低功耗彩屏 | 全天候心率监测</p>
                <div class="know">
                    了解更多
                </div>
            </div>
        </div>
         -->
        <!-- 手表详情 结束 -->
        <div class="smart_watch1">
            <h2>运动健康APP</h2>
            <h3>你的运动健康管家</h3>
            <div class="know">
                <li><router-link to="/index/alldocuments">了解更多</router-link></li>
            </div>
            <img src="@/assets/img/APP.png" alt="" class="shouji">
        </div>
    </div>
    <!-- 智能手表 结束 -->
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
// 轮播图
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay
} from 'swiper'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
const { proxy } = getCurrentInstance()
onMounted(() => {
  consst()
  lists()
})
const data = ref([])
async function consst () {
    const { data: res } = await proxy.$http.get('navlist')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    // console.log(res.msg)
      data.value = res.msg
 }
}
const list = ref([])
const filterst = ref([])
const two = ref([])
const resultArr = ref([])
async function lists () {
    const { data: res } = await proxy.$http.get('good_list')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    // console.log(res.msg)
    list.value = res.msg
    //  list.value.map(train=>{
    //      that.new_Positions.push( train.trainId)
    //  })
    //  that.resultArr = [];//去重后的数组
     const flag = ref(null)
     for (var i in list.value) {
        flag.value = true
        for (var j in resultArr.value) {
            // console.log(list.value[i].name_en)
            if (resultArr.value[j].image === list.value[i].image) {
                flag.value = false
                break
            }
        }
        if (flag.value) {
            resultArr.value.push(list.value[i])
        }
     }
     resultArr.value = list.value
     console.log(resultArr)
     /* for (var i in that.new_Positions){
         flag = true
         for (var j in that.resultArr) {
             if (that.resultArr[j] == that.new_Positions[i]) {
                 flag = false
                 break
             }
         }
         if (flag) {
             that.resultArr.push(that.new_Positions[i])
         }
    } */
    // console.log(resultArr)
    resultArr.value.forEach(val => {
        if (val.id % 2 !== 1) {
            two.value.push(val)
            console.log(1)
            if (two.value.length === 2) {
                console.log('2222222')
                filterst.value.push(two.value)
                two.value = []
            }
        } else {
            console.log('333333333333333')
            filterst.value.push(val)
        }
    })
    // console.log(two.value.length)
    console.log(filterst.value)
 }
}

</script>
<style scoped>
@import url('../assets/css/smartwatch.css');
</style>
